<template>
    <div class="ablums">

        <div class="header">
            <Cloud></Cloud>
        </div>
        <div class="content">
            <div class="_content">
                <div class="left">
                    <div class="header" v-for="it in year_list" :key="it">
                        <div @click="times(it)" class="year" :class="{ 'isactive': it === currentTime.year }">{{
                            it }}年</div>
                    </div>
                </div>
                <div class="right">
                    <div class="month">
                        <div @click="months(item.id)" v-for="item in month_list" :key="item.id" class="monthe_item"
                            :class="{ 'isMonth': item.id === currentTime.month }" :data-index="item.id">
                            {{ item.title }}
                        </div>

                    </div>
                    <div class="images">
                        <Images v-for="item in image_list" :key="item._id" :item="item"></Images>

                    </div>
                </div>
            </div>
        </div>
        <transition name="cloud1" style="position: absolute;top:0">

            <div class="loading_left" v-if="loading">

            </div>
        </transition>
        <transition name="cloud2" style="position: absolute;top:0">
            <div class="loading_right" v-if="loading">

            </div>
        </transition>
        <div class="preive" v-if="store.preshow" @click="close"
            style="display: flex;justify-content: center;align-items: center; position: absolute;top:0;width: 100vw;height: 90vh;background-color: rgba(0,0,0,0.5);">
            <el-image style="width: 50%;height: 50%;" :src="store.imgurl" fit="fill" :lazy="true"></el-image>
        </div>
    </div>
</template>
<script setup lang="ts">
import Cloud from "@/components/Alumbs/Cloud.vue"
import Images from "@/components/Alumbs/Images.vue"
import { ref, onMounted, reactive } from "vue"
import { AppStore } from "@/store";
import { format } from "@/utils/formatTime"
import { Get_ablums_list, Get_ablums_diffrent_year } from "@/apis/web/WebApi"
const store = AppStore()
let loading = ref(true)
let currentTime = reactive<{ year: number, month: number }>(format.formatDate2(Date.now()))
const image_list = ref<any>([])
const year_list = ref([])
onMounted(() => {
    Get_years()
    GetData()


})
const Get_years = async () => {
    const result = await Get_ablums_diffrent_year()

    result.data.reverse()
    year_list.value = result.data
}
const GetData = async () => {
    const result = await Get_ablums_list(currentTime)
    image_list.value = result.data

    loading.value = false
}
const months = async (e: number) => {
    currentTime.month = Number(e)
    GetData()

}
const times = async (year: number) => {
    currentTime.year = year
    currentTime.month = 1
    image_list.value = []
    GetData()
}

const close = () => {
    store.preshow = false
}

const month_list = [{
    id: 1,
    title: "1月"
}, {
    id: 2,
    title: "2月"
}, {
    id: 3,
    title: "3月"
}, {
    id: 4,
    title: "4月"
}, {
    id: 5,
    title: "5月"
}, {
    id: 6,
    title: "6月"
}, {
    id: 7,
    title: "7月"
}, {
    id: 8,
    title: "8月"
}, {
    id: 9,
    title: "9月"
}, {
    id: 10,
    title: "10月"
}, {
    id: 11,
    title: "11月"
}, {
    id: 12,
    title: "12月"
}]

</script>

<style lang="scss" scoped>
// ::-webkit-scrollbar {
//     display: none;
//     /* Chrome Safari */
// }

.cloud1-enter-active,
.cloud1-leave-active {
    transition: all 3s ease;

}

.cloud1-enter-from,
.cloud1-leave-to {
    transform: rotateY(-90deg);
}



.cloud2-enter-active,
.cloud2-leave-active {
    transition: all 3s ease;
}

.cloud2-enter-from,
.cloud2-leave-to {
    transform: rotateY(90deg);
}

.ablums {
    width: 100%;
    position: relative;

    .loading_left {
        position: absolute;
        width: 50%;
        height: 100%;
        background: url('../../assets/left.png') no-repeat;
        background-size: cover;
        height: 90vh;
        overflow: hidden;
        transform-origin: left bottom;

    }

    .loading_right {
        position: absolute;
        width: 50%;
        height: 100%;
        right: 0;
        background: url('../../assets/right.png') no-repeat;
        height: 90vh;
        overflow: hidden;
        background-size: cover;
        transform-origin: right bottom;
    }

    .content {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: center;

        ._content {
            width: 80%;
            display: flex;

            .left {
                flex: 2;
                background: rgba(255, 255, 255, 0.5);



                .header {
                    width: 100%;

                    .year {
                        width: 100%;

                        text-align: center;
                        font-size: 1.5vw;
                        font-weight: bold;
                        padding: 1vw;
                        box-sizing: border-box;
                    }

                    .isactive {
                        background-color: white;
                    }

                    .year:hover {
                        background-color: aliceblue;
                    }


                    .active {
                        opacity: 0;
                    }
                }
            }

            .right {
                flex: 8;
                background-color: rgba(255, 255, 255, 0.8);
                overflow-y: scroll;
                height: 75vh;

                .month {
                    display: flex;
                    justify-content: space-evenly;
                    border-bottom: 1px solid #eee;
                    padding: 0.5vw;

                    .monthe_item {
                        background-color: rgb(240, 159, 7, 0.5);
                        padding: 0.5vw;
                        transition: all 1s;
                        box-shadow: 0 0 10px #000;
                        font-size: 1.5vw;
                    }

                    .isMonth {
                        background-color: #93A8AC;
                    }

                    .monthe_item:hover {
                        transform: translateY(-20%);

                    }
                }

                .images {
                    width: 100%;


                }
            }
        }


    }
}
</style>